<template>
  <div id="TITLESS">
    <div class="cnt" :style="{ '--bgColor': `'${cnt}'` }">
      {{ cnt }}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    cnt: {
      type: String,
      default: "",
    },
  },
};
</script>
<style scoped lang="scss">
#TITLESS {
  height: 45px;
  line-height: 45px;
  background: url(@/assets/image/titleBg.png) no-repeat;
  background-size: 100% 100%;
  .cnt {
    text-align: left;
    margin: 0 38px;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 2px;
    text-shadow: 0px 6px 3px rgba(1, 54, 96, 1);
    font-weight: 600;
    &::before {
      content: var(--bgColor);

      position: absolute;
      z-index: 10;
      color: #fefefe;
      // 渐变样式
      background: linear-gradient(
        180deg,
        rgba(94, 183, 255, 1) 0%,
        rgba(229, 243, 255, 1) 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      // 去除继承父级样式
      text-shadow: none;
    }
  }
}
</style>